<template>
  <div class="doctor-info-form-page">
    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
    </div>
    
    <!-- 主要内容 -->
    <div class="form-container">
      <!-- 头部信息 -->
      <div class="form-header">
        <div class="header-content">
          <div class="brand-icon">
            <el-icon size="48"><UserFilled /></el-icon>
          </div>
          <h1 class="page-title">完善个人信息</h1>
          <p class="page-subtitle">请补充您的详细信息，以便更好地为患者提供服务</p>
        </div>
      </div>
      
      <!-- 表单内容 -->
      <div class="form-content">
        <el-form 
          ref="infoFormRef" 
          :model="doctorForm" 
          :rules="formRules" 
          label-width="120px"
          class="doctor-info-form"
        >
          <!-- 基本信息区域 -->
          <div class="form-section">
            <div class="section-title">
              <el-icon><User /></el-icon>
              <span>基本信息</span>
            </div>
            
            <div class="form-row">
              <div class="form-col">
                <el-form-item label="医生工号" prop="doctorNo">
                  <el-input
                    v-model="doctorForm.doctorNo"
                    placeholder="请输入医生工号"
                    :prefix-icon="User"
                  />
                </el-form-item>
              </div>
              <div class="form-col">
                <el-form-item label="姓名" prop="name">
                  <el-input
                    v-model="doctorForm.name"
                    placeholder="请输入真实姓名"
                    :prefix-icon="User"
                    disabled
                  />
                </el-form-item>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-col">
                <el-form-item label="性别" prop="gender">
                  <el-select
                    v-model="doctorForm.gender"
                    placeholder="请选择性别"
                    style="width: 100%"
                  >
                    <el-option label="男" :value="1" />
                    <el-option label="女" :value="2" />
                  </el-select>
                </el-form-item>
              </div>
              <div class="form-col">
                <el-form-item label="年龄" prop="age">
                  <el-input-number
                    v-model="doctorForm.age"
                    :min="20"
                    :max="80"
                    placeholder="请输入年龄"
                    style="width: 100%"
                  />
                </el-form-item>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-col">
                <el-form-item label="手机号码" prop="phone">
                  <el-input
                    v-model="doctorForm.phone"
                    placeholder="请输入手机号码"
                    :prefix-icon="Phone"
                  />
                </el-form-item>
              </div>
              <div class="form-col">
                <el-form-item label="邮箱地址" prop="email">
                  <el-input
                    v-model="doctorForm.email"
                    placeholder="请输入邮箱地址"
                    :prefix-icon="Message"
                  />
                </el-form-item>
              </div>
            </div>
            
            <div class="form-row">
              <div class="form-col">
                <el-form-item label="身份证号" prop="idCard">
                  <el-input
                    v-model="doctorForm.idCard"
                    placeholder="请输入身份证号"
                    :prefix-icon="CreditCard"
                  />
                </el-form-item>
              </div>
              <div class="form-col">
                <!-- 空列，保持布局平衡 -->
              </div>
            </div>
          </div>
          
          <!-- 专业信息区域 -->
          <div class="form-section">
            <div class="section-title">
              <el-icon><Document /></el-icon>
              <span>专业信息</span>
            </div>
            
            <div class="form-row">
              <div class="form-col">
                <el-form-item label="所属科室" prop="deptId">
                  <el-select
                    v-model="doctorForm.deptId"
                    placeholder="请选择所属科室"
                    style="width: 100%"
                  >
                    <el-option 
                      v-for="dept in departments" 
                      :key="dept.id" 
                      :label="dept.name" 
                      :value="dept.id" 
                    />
                  </el-select>
                </el-form-item>
              </div>
              <div class="form-col">
                <el-form-item label="医师资格证号" prop="qualificationNo">
                  <el-input
                    v-model="doctorForm.qualificationNo"
                    placeholder="请输入医师资格证号"
                    :prefix-icon="CreditCard"
                  />
                </el-form-item>
              </div>
            </div>
          </div>
          
          <!-- 按钮区域 -->
          <div class="form-actions">
            <el-button 
              size="large" 
              @click="handleSkip"
              class="skip-btn"
            >
              暂时跳过
            </el-button>
            <el-button 
              type="primary" 
              size="large" 
              @click="handleSubmit"
              :loading="submitting"
              class="submit-btn"
            >
              <el-icon v-if="!submitting"><Check /></el-icon>
              {{ submitting ? '保存中...' : '保存信息' }}
            </el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  UserFilled, 
  User, 
  Phone, 
  Message, 
  Document, 
  Check,
  CreditCard
} from '@element-plus/icons-vue'
import { updateDoctorProfile } from '../api/doctor.js'

const router = useRouter()
const infoFormRef = ref(null)
const submitting = ref(false)

// 表单数据
const doctorForm = reactive({
  doctorId: '',
  doctorNo: '',
  name: '',
  gender: '',
  age: null,
  phone: '',
  email: '',
  deptId: null,
  qualificationNo: '',
  idCard: '',
  faceInfoId: null
})

// 科室列表
const departments = ref([
  { id: 1, name: '心理科' },
  { id: 2, name: '精神科' },
  { id: 3, name: '儿童心理科' },
  { id: 4, name: '青少年心理科' },
  { id: 5, name: '成人心理科' },
  { id: 6, name: '老年心理科' },
  { id: 7, name: '康复科' },
  { id: 8, name: '心理咨询科' }
])

// 表单验证规则
const formRules = {
  doctorNo: [
    { required: true, message: '请输入医生工号', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    { type: 'number', min: 20, max: 80, message: '年龄必须在 20-80 岁之间', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  idCard: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号', trigger: 'blur' }
  ],
  deptId: [
    { required: true, message: '请选择所属科室', trigger: 'change' }
  ],
  qualificationNo: [
    { required: true, message: '请输入医师资格证号', trigger: 'blur' }
  ]
}

// 初始化数据
const initializeData = () => {
  // 从localStorage获取临时保存的医生信息
  const tempDoctorInfo = localStorage.getItem('tempDoctorInfo')
  if (tempDoctorInfo) {
    const info = JSON.parse(tempDoctorInfo)
    doctorForm.doctorId = info.doctorId || info.id || ''
    doctorForm.name = info.doctorName || info.name || ''
    doctorForm.deptId = info.deptId || null
    doctorForm.faceInfoId = info.faceInfoId || null
    
    // 如果没有工号，生成一个默认工号
    if (!doctorForm.doctorNo) {
      doctorForm.doctorNo = 'DOC' + (info.doctorId || new Date().getTime())
    }
  }
}

// 提交表单
const handleSubmit = async () => {
  if (!infoFormRef.value) return
  
  try {
    const valid = await infoFormRef.value.validate()
    if (!valid) return
    
    // 检查是否有医生ID
    if (!doctorForm.doctorId) {
      ElMessage.error('缺少医生ID，无法更新信息')
      return
    }
    
    submitting.value = true
    
    // 准备提交的数据，对应后端DoctorInfoDTO
    const submitData = {
      age: doctorForm.age,
      email: doctorForm.email,
      gender: doctorForm.gender, // 1=男，2=女
      phone: doctorForm.phone,
      doctorNo: doctorForm.doctorNo,
      deptId: doctorForm.deptId,
      qualificationNo: doctorForm.qualificationNo,
      idCard: doctorForm.idCard,
      faceInfoId: doctorForm.faceInfoId
    }
    
    // 调用API更新医生信息
    const response = await updateDoctorProfile(doctorForm.doctorId, submitData)
    
    if (response.result) {
      ElMessage.success('个人信息保存成功！')
      
      // 清除临时数据
      localStorage.removeItem('tempDoctorInfo')
      
      // 跳转到首页
      router.push('/home')
    } else {
      ElMessage.error(response.msg || '保存失败')
    }
    
  } catch (error) {
    console.error('Submit error:', error)
    ElMessage.error(error.message || '保存失败，请重试')
  } finally {
    submitting.value = false
  }
}

// 暂时跳过
const handleSkip = () => {
  ElMessage.info('您可以稍后在个人设置中完善信息')
  
  // 清除临时数据
  localStorage.removeItem('tempDoctorInfo')
  
  // 跳转到首页
  router.push('/home')
}

// 组件挂载时初始化数据
onMounted(() => {
  initializeData()
})
</script>

<style scoped>
.doctor-info-form-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: 
    linear-gradient(135deg, 
      rgba(165, 214, 167, 0.9) 0%,
      rgba(129, 199, 132, 0.8) 25%,
      rgba(79, 195, 247, 0.8) 75%,
      rgba(144, 202, 249, 0.9) 100%
    );
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.background-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.15) 0%, 
    rgba(129, 199, 132, 0.1) 50%, 
    rgba(79, 195, 247, 0.1) 100%
  );
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: healingFloat 8s ease-in-out infinite;
}

.circle-1 {
  width: 180px;
  height: 180px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.circle-2 {
  width: 120px;
  height: 120px;
  top: 60%;
  right: 15%;
  animation-delay: 2.5s;
}

.circle-3 {
  width: 90px;
  height: 90px;
  bottom: 20%;
  left: 20%;
  animation-delay: 5s;
}

@keyframes healingFloat {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg) scale(1); 
    opacity: 0.6;
  }
  33% { 
    transform: translateY(-15px) rotate(120deg) scale(1.05); 
    opacity: 0.8;
  }
  66% { 
    transform: translateY(-8px) rotate(240deg) scale(0.95); 
    opacity: 0.7;
  }
}

.form-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 900px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 24px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
  margin: 20px auto;
}

.form-header {
  background: linear-gradient(135deg, #81C784 0%, #4FC3F7 100%);
  color: white;
  padding: 40px;
  text-align: center;
  position: relative;
}

.header-content {
  position: relative;
  z-index: 1;
}

.brand-icon {
  margin-bottom: 20px;
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 10px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-subtitle {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
  line-height: 1.5;
}

.form-content {
  padding: 40px;
}

.doctor-info-form {
  max-width: 100%;
}

.form-section {
  margin-bottom: 40px;
  padding: 24px;
  background: rgba(248, 252, 248, 0.5);
  border-radius: 16px;
  border: 1px solid rgba(129, 199, 132, 0.1);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(129, 199, 132, 0.2);
}

.section-title .el-icon {
  color: #81C784;
  font-size: 20px;
}

.form-row {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
}

.form-row.full-width {
  flex-direction: column;
}

.form-col {
  flex: 1;
  position: relative;
}

.field-suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 14px;
  pointer-events: none;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

.skip-btn {
  padding: 12px 32px;
  font-size: 16px;
  border-radius: 25px;
  border: 2px solid #ddd;
  color: #666;
  background: white;
  transition: all 0.3s ease;
}

.skip-btn:hover {
  border-color: #81C784;
  color: #81C784;
}

.submit-btn {
  padding: 12px 40px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 25px;
  background: linear-gradient(135deg, #81C784 0%, #4FC3F7 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(129, 199, 132, 0.4);
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(129, 199, 132, 0.6);
}

/* Element Plus 样式覆盖 */
.doctor-info-form :deep(.el-form-item__label) {
  color: #333;
  font-weight: 500;
}

.doctor-info-form :deep(.el-input__wrapper) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(129, 199, 132, 0.2);
  transition: all 0.3s ease;
}

.doctor-info-form :deep(.el-input__wrapper:hover) {
  border-color: rgba(129, 199, 132, 0.4);
}

.doctor-info-form :deep(.el-input__wrapper.is-focus) {
  border-color: #81C784;
  box-shadow: 0 0 0 2px rgba(129, 199, 132, 0.2);
}

.doctor-info-form :deep(.el-select) {
  width: 100%;
}

.doctor-info-form :deep(.el-textarea__inner) {
  border-radius: 12px;
  border: 1px solid rgba(129, 199, 132, 0.2);
  transition: all 0.3s ease;
}

.doctor-info-form :deep(.el-textarea__inner:hover) {
  border-color: rgba(129, 199, 132, 0.4);
}

.doctor-info-form :deep(.el-textarea__inner:focus) {
  border-color: #81C784;
  box-shadow: 0 0 0 2px rgba(129, 199, 132, 0.2);
}

.doctor-info-form :deep(.el-checkbox-group) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.doctor-info-form :deep(.el-checkbox) {
  margin-right: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .doctor-info-form-page {
    padding: 10px;
  }
  
  .form-container {
    max-width: 100%;
    margin: 10px;
    border-radius: 16px;
  }
  
  .form-header {
    padding: 30px 20px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .form-content {
    padding: 20px;
  }
  
  .form-section {
    padding: 16px;
  }
  
  .form-row {
    flex-direction: column;
    gap: 16px;
  }
  
  .form-actions {
    flex-direction: column;
    gap: 16px;
  }
  
  .skip-btn,
  .submit-btn {
    width: 100%;
  }
  
  .doctor-info-form :deep(.el-checkbox-group) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .form-header {
    padding: 20px 15px;
  }
  
  .page-title {
    font-size: 20px;
  }
  
  .page-subtitle {
    font-size: 14px;
  }
  
  .form-content {
    padding: 15px;
  }
  
  .form-section {
    padding: 12px;
  }
  
  .section-title {
    font-size: 16px;
  }
}
</style>
